<template>
    <el-dialog title="授权" width="800" :visible.sync="visible">
        <el-table
            :data="tableList"
            row-key="id"
            ref="tableRef"
            stripe
            default-expand-all
            :select-on-indeterminate="true"
            :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
            @select-all="selectAll"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="60"></el-table-column>

            <el-table-column
                label="名称"
                prop="name"
                width="260"
            ></el-table-column>

            <el-table-column label="类型" prop="type">
                <template slot-scope="scope">
                    <span>{{ scope.row.type | systemMenuTypeToStr }}</span>
                </template>
            </el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { adminRole as Api } from "api";

export default {
    props: {
        id: {
            type: Number,
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            isAllSelect: false,

            // 表格
            tableList: [],
            tableSelectIdArr: [], // 全选ID数组
        };
    },
    methods: {
        async init() {
            // 默认菜单权限ID
            let { data } = await this.$axios.get(Api.getAuthList, {
                params: {
                    role_id: this.id,
                },
            });

            // 获取权限菜单列表
            this.getRoleMenuList(data);
        },

        async getRoleMenuList(menuIds = []) {
            const { code, data } = await this.$axios.get(Api.getMenuList);
            if (code === 200) {
                const menuList = this.$utils.getCategory(data);
                this.tableList = this.$utils.getChildrenTree(
                    menuList,
                    menuList[0]
                );
                const twoMenuList = this.$utils.getTreeToArray(
                    this.tableList,
                    null,
                    false,
                    null
                ); // 按可伸展处理分类

                setTimeout(() => {
                    if (menuIds.length) {
                        const authIdArr = menuIds.split(",");

                        for (let i in twoMenuList) {
                            if (
                                authIdArr.indexOf(String(twoMenuList[i].id)) >=
                                0
                            ) {
                                this.$refs.tableRef.toggleRowSelection(
                                    twoMenuList[i]
                                );
                            }
                        }
                    }
                }, 200);
            }
        },

        /**
         * 全选/取消操作
         */
        selectAll(selection, first) {
            if (!first) {
                this.isAllSelect = !this.isAllSelect;
            }

            const menuList = this.$utils.getTreeToArray(
                selection,
                null,
                false,
                null
            ); // 按可伸展处理分类

            for (let i in menuList) {
                this.$refs.tableRef.toggleRowSelection(
                    menuList[i],
                    this.isAllSelect
                );
            }
        },

        handleSelectionChange(rows) {
            this.tableSelectIdArr = [];

            if (rows.length) {
                for (let i in rows) {
                    this.tableSelectIdArr.push(rows[i].id);
                }
            } else {
                this.tableSelectIdArr = [];
            }
        },

        async onSubmit() {
            this.loading = true;

            let params = {
                role_id: this.id,
                menu_id: this.tableSelectIdArr,
            };

            if (this.loading) {
                const { code, msg } = await this.$axios.post(
                    Api.updateAuth,
                    params
                );

                if (code == 200) {
                    this.$msg.success(msg);
                    this.visible = false;
                }

                this.loading = false;
            }
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            if (status) {
                this.init();
            }
        },
    },
};
</script>